<template>
   <div>

        <el-input v-model="mes"></el-input>
        <el-button @click="send">send</el-button>  

        <ul>
            <li v-for="i in userlist" :key="i.id">
               <el-button @click="submit(i.id)"> {{ i.name }} </el-button>
            </li>
        </ul>

        <ul>
            <li v-for="i in usermes" :key="i.id">{{ i }}</li>
        </ul>
        
   </div>
</template>

<script setup>
import {ref,onMounted}  from 'vue'



const websocket = ref()
const usermes = ref([])
const userwebsocket = ref()
const mes = ref()
const senduser = ref()

const userlist = ref([])
const send = (userid) => {
    websocket.value.onsend({"room":senduser.value+'1001',"mes":mes.value})
}

const submit = (userid) => {
    senduser.value = userid
    usermes.value=[]
    userwebsocket.value = new WebSocket("ws://localhost:8000/room/user"+userid);
    userwebsocket.value.onopen = (event) => {
        alert('连接成功')
    }
    userwebsocket.value.onmessage = (event) => {       
        usermes.value.push(JSON.parse(event.data))
    }
    
}

const initwebsocket = () => {
    const room = 'kefu1001'
    websocket.value = new WebSocket("ws://localhost:8000/room/"+room);
    websocket.value.onopen = (event) => {
        alert('连接成功')
    }
    websocket.value.onmessage = (event) => {
        // console.log(JSON.parse(event.data));
        //ydata.value = JSON.parse(event.data)
        //initecharts()
        userlist.value.push(JSON.parse(event.data))
    }
}


onMounted(() => {
    initwebsocket();
})
</script>
